body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup, i {
	font-style: normal;
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
abbr, acronym {
	border: 0;
	font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}
code, kbd, samp, tt {
	font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
	*font-size: 100%;
}
body {
	line-height: 1.5;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
sup, sub {
	font-size: 100%;
	vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
	text-decoration: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


/*载入字体*/
@font-face {
  font-family: 'nssc';
  src: url('font/NotoSansHans-Light.otf');
  font-weight: normal;
  font-style: normal;
}
/*全局样式*/
html,body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 20px;
  font-family: nssc;
  color: #6b6b6b;
}
.main-box{
  width: 100%;
  height: 100%;
  position: relative;
}
.slight-text{
  color: #e8eef5;
}
.light-text{
  color: #a2a8b2;
}
.normal-text{
  color: #a6b4c2;
}
.black-text{
  color: #6b6b6b;
}
.white-text{
  color: #ffffff;
}
.blue-text{
  color: #369ddf;
}
.green-text{
  color: #3acb89;
}
.red-text{
  color: #ff785d;
}

/*过渡效果*/
.play-btn,
.play-btn span,
.play-btn span:after,
.divtable-body li,
.data4-row-cell{
	transition: all .3s;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
}

/*顶部导航条*/
.top-nav{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px;
  height:40px;
  line-height: 40px;
  background: #369ddf;
  background-image:-webkit-linear-gradient(to right, #369ddf, #00b4aa);
  background-image:linear-gradient(to right,#369ddf,#00b4aa);
}
.top-nav>div{
  line-height: 40px;
  font-size: 22px;
  color: #fff;
}
.nav-logo{
  float: left;
}
.nav-option{
  float: right;
	position: relative;
	top: -3px;
}
.nav-date{
  margin: 0 30%;
  text-align: center;
}
.nav-date>span{
	font-size: 26px;
	font-weight: bold;
	text-shadow: 0 2px 10px rgba(0,0,0,.15);
	letter-spacing: 2px;
}
.nav-option>span{
	font-size: 18px;
	line-height: 46px;
	padding-right: 16px;
	opacity: .8;
}
.play-btn{
	float: right;
	position: relative;
	width: 40px;
	height: 40px;
	border: 3px solid transparent;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}
.play-btn .play-one{
	display: block;
	position: absolute;
	left: 12px;
	top: 10px;
	width: 4px;
	height: 20px;
	background: #fff;
}
.play-btn .play-one:after{
	display: block;
	content: "";
	position: absolute;
	left: 1px;
	top: 0;
	width: 0;
	height: 0;
	border: 16px solid transparent;
	border-top-width: 10px;
	border-bottom-width: 10px;
	border-left-color: #fff;
	opacity: 0;
}
.play-btn .play-two{
	display: block;
	position: absolute;
	right: 12px;
	top: 10px;
	width: 4px;
	height: 20px;
	background: #fff;
}
.play-btn.stop{
	border-color: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.play-btn.stop .play-one,
.play-btn:active .play-one{
	width: 0;
}
.play-btn.stop .play-one:after,
.play-btn:active .play-one:after{
	opacity: 1;
}
.play-btn.stop .play-two,
.play-btn:active .play-two{
	width: 0;
}

/*数据轮播主体*/
.datapage-box{
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	overflow: hidden;
}
.data-page{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.data-row{
	border-bottom: 1px solid #d9e3ee;
	background: #fff;
}
.data-page>.data-row:last-child{
	border-bottom: none;
}
.data-row-cell{
	float: left;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	height: 100%;
	position: relative;
	overflow: hidden;
	border-right: 1px solid #d9e3ee;
	text-align: center;
	box-sizing: border-box;
}
.data-row>.data-row-cell:last-child{
	border-right: none;
}

/*第一屏*/
.data1-row1{
	height: 33%;
}
.data1-row1-cell1,
.data1-row1-cell3{
	width:27%;
}
.data1-row1-cell2{
	width: 46%;
}
.data1-row1-cell h2{
	position: absolute;
	left: -14px;
	top: 14px;
	font-size: 72px;
}
.data1-row1-cell-number span{
	display: inline-block;
	font-size: 80px;
	line-height: 1.2;
}
.data1-row1-cell-number h3{
	font-size: 20px;
}
.todayAll{
	height: 114px;
	position: relative;
}
.green-text i{
  display:inline-block;
  float:left;
  height:114px;
  width:80px;
	background:url(../img/num.png) no-repeat;
}
.green-text b{
  display:inline-block;
  float:left;
  height:114px;
  width:32px;
	background:url(../img/num.png) no-repeat 0 -1140px;
}
.todayAll em{
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	margin-left: 30px;
	line-height: 114px;
	font-size: 20px;
	padding-left: 50px;
	background: url("../img/addNum_icon.png") no-repeat left center;
}
.yesterdayAll,
.totalAll{
	height: 68px;
}
.light-text i{
  display:inline-block;
  float:left;
  height:68px;
  width:42px;
	background:url(../img/num_gray_s.png) no-repeat;
}
.data1-row1-cell2 .data1-row1-cell-number span{
	font-size: 124px;
}
.data1-row2{
	height: 67%;
}
.data1-row2-cell1{
	width:37%;
}
.data1-row2-cell2{
	width: 63%;
}
.data1-row2-cell h3{
	position: absolute;
	left: 20px;
	top: 20px;
	font-size: 20px;
}
.data1-row2-cell-chart{
	width: 100%;
	height: 100%;
}

/*第二屏*/
.data2-row{
	height: 50%;
}
.data2-row-cell1{
	width: 26%;
}
.data-row-cell.data2-row-cell2{
	width: 29%;
	display: block;
}
.data2-row-cell3{
	width: 45%;
}
.data2-row-cell2 .data-row-cell{
	float: left;
	width: 100%;
	height: 50%;
	border-right: none;
	border-bottom: 1px solid #d9e3ee;
}
.data2-row-cell2 .data-row-cell:last-child{
	border-bottom: none;
}
.data2-row-cell-number{
	text-align: center;
	font-size: 36px;
	line-height: 1.3;
}
.data2-row-cell-number h2{
	font-size: 50px;
}
.data2-row-cell-number span{
	font-size: 60px;
}
.data2-row-cell-number p{
	font-size: 20px;
}
.platform-cell{
	position: relative;
	text-align: center;
	background-repeat: no-repeat;
	background-position: -40px 120%;
}
.platform-cell .data2-row-cell-number{
	font-size: 30px;
}
.platform-cell .data2-row-cell-number span{
	font-size: 50px;
}
.platform-cell.android-cell{
	background-image: url(../img/android.png);
}
.platform-cell.ios-cell{
	background-image: url(../img/ios.png);
}
.data2-row-cell3{
	position: relative;
}
.data2-row-cell3 h2{
	position: absolute;
	left: 20px;
	top: 20px;
	font-size: 20px;
}
.data2-row-cell-chart	{
	width: 100%;
	height: 100%;
}

/*第三屏*/
.data3-row{
	height: 100%;
}
.data-row-cell.data3-row-cell1{
	width: 30%;
	display: block;
}
.data3-row-cell2,
.data3-row-cell3{
	width: 35%;
	display: block;
	position: relative;
	padding: 75px 20px 30px;
}
.data3-row-cell1 .data-row-cell{
	float: left;
	width: 100%;
	height: 50%;
	border-right: none;
}
.app-cell{
	text-align: center;
}
.data3-row-cell-number{
	padding-top: 40px;
}
.data3-row-cell-number h2{
	font-size: 44px;
	padding-bottom: 20px;
}
.data3-row-cell-number .data3-data{
	display: inline-block;
	padding: 14px 50px;
	font-size: 20px;
	line-height: 1.3;
}
.data3-data span{
	font-size: 40px;
}
.data3-data.data3-data-main span{
	font-size: 70px;
}
.data3-row-cell-chart{
	width: 100%;
	height: 100%;
}
.data3-row-cell2>h2,
.data3-row-cell3>h2{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	text-align: center;
	font-size: 22px;
	line-height: 75px;
}
.divtable{
	height: 100%;
	box-sizing: border-box;
	padding-top: 60px;
	position: relative;
}
.divtable .divtable-head{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	line-height: 60px;
	font-size: 18px;
	background: #f4f6f8;
	padding: 0 20px;
}
.divtable-head span{
	float: left;
}
.divtable-head span:last-child{
	float: right;
}
.divtable-body{
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
}
.divtable-body li{
	background: transparent;
}
.divtable-body li:hover{
	background: #fcfaef;
}
.app-call-table li{
	padding: 16px 0 8px;
}
.app-call-table li p{
	display: block;
	line-height: 40px;
	font-size: 18px;
}
.app-call-table li p em{
	float: left;
	width: 25px;
	text-align: left;
	padding: 0 0 0 20px;
}
.app-call-table li i{
	float: right;
	width: 90px;
	padding-right: 30px;
	text-align: right;
}
.app-call-table li span{
	display: block;
	margin: 0 120px 0 45px;
	text-align: left;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
/*s进度条s*/
.scale-div{
	margin: 0 14px;
	height: 8px;
	background: #f4f6f8;
	overflow: hidden;
	border-radius: 2px;
}
.scale-div .scale-fill{
	float: left;
	width: 0;
	height: 100%;
	background-color: #3acb89;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
     -moz-background-size: 40px 40px;
       -o-background-size: 40px 40px;
          background-size: 40px 40px;
  background-repeat: repeat-x;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: width 0.6s ease;
     -moz-transition: width 0.6s ease;
       -o-transition: width 0.6s ease;
          transition: width 0.6s ease;
	-webkit-animation: progress-bar-stripes 2s linear infinite;
	   -moz-animation: progress-bar-stripes 2s linear infinite;
	 	  -ms-animation: progress-bar-stripes 2s linear infinite;
	     -o-animation: progress-bar-stripes 2s linear infinite;
	        animation: progress-bar-stripes 2s linear infinite;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
/*e进度条e*/
.app-delay-table li{
	padding: 14px 0 13px;;
	line-height: 44px;
	border-bottom: 1px solid #e8edf3;
	box-sizing: border-box;
	font-size: 18px;
}
.app-delay-table li>em{
	float: left;
	width: 25px;
	text-align: left;
	padding: 0 0 0 20px;
}
.app-delay-table li>div{
	float: right;
	width: 200px;
	padding-right: 20px;
	font-size: 16px;
	text-align: right;
	line-height: 1.4;
}
.app-delay-table li>div span{
	display: block;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
.app-delay-table li>span{
	display: block;
	margin: 0 220px 0 45px;
	text-align: left;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

/*第四屏*/
.data4-row{
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-top: 70px;
}
.data4-row-head{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	line-height: 70px;
	padding: 0 20px;
	border-bottom: 1px solid #d9e3ee;
	box-sizing: border-box;
}
.data4-row-head h2{
	float: left;
	font-size: 24px;
}
.data4-row-head p{
	float: right;
	font-size: 18px;
}
.data4-row-body{
	height: 100%;
	width: 100%;
	overflow: hidden;
	overflow-y: auto;
}
.data4-row-cell{
	float: left;
	height: 280px;
	width: 25%;
	position: relative;
	border: 1px solid #fff;
	border-right-color: #d9e3ee;
	border-bottom-color: #d9e3ee;
	background: #fff;
	box-shadow: none;
}
.data4-row-cell:hover{
	transform: scale(1.06);
	z-index: 999;
	box-shadow: 0 0 60px rgba(0,0,0,.05);
	border-color: transparent;
}
.data4-row-body .data4-row-cell:nth-child(4n){
	border-right: none;
}
.data4-row-cell>h3{
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	line-height: 32px;
	font: 26px;
	text-align: left;
}
.data4-row-cell-number h4{
	font-size: 40px;
	padding-top: 60px;
}
.data4-row-cell-number .data4-row-cell-chart{
	width: 290px;
	height: 110px;
}
